<template>
  <div class="min-h-screen bg-white pt-32 pb-16">
    <div class="container mx-auto px-4">
      <!-- 页面标题 -->
      <h1 class="text-3xl font-bold text-gray-800 mb-10 text-center">
        项目作品展示
      </h1>

      <!-- 主内容区 -->
      <div class="flex flex-col md:flex-row gap-8">
        <!-- 左侧分类栏 -->
        <div class="w-full md:w-64 flex-shrink-0">
          <div class="bg-gray-50 rounded-lg shadow-sm p-6 sticky top-24">
            <h2 class="text-xl font-semibold mb-6 text-gray-800 border-b pb-2">项目分类</h2>
            <ul class="space-y-2">
              <li v-for="category in categories" :key="category.id">
                <button
                  @click="selectCategory(category.id)"
                  :class="[selectedCategory === category.id ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-blue-50',
                  'w-full text-left px-4 py-2 rounded-md transition-colors duration-200 flex items-center']"
                >
                  <span :class="selectedCategory === category.id ? 'w-2 h-2 bg-white rounded-full mr-3' : 'w-2 h-2 bg-gray-300 rounded-full mr-3'"
                  ></span>
                  {{ category.name }}
                </button>
              </li>
            </ul>
          </div>
        </div>

        <!-- 右侧项目列表 -->
        <div class="flex-1">
          <!-- 加载状态 -->
          <div v-if="isLoading" class="flex justify-center items-center min-h-[400px]">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
          </div>

          <!-- 项目网格 -->
          <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
            <div
              v-for="project in filteredProjects"
              :key="project.id"
              class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <div class="overflow-hidden">
                <img
                  :src="project.image"
                  :alt="project.name"
                  class="w-full h-48 object-cover transition-transform duration-700 hover:scale-110"
                >
              </div>
              <div class="p-6">
                <div class="flex items-center text-sm text-blue-600 mb-2">
                  <span class="bg-blue-50 px-2 py-1 rounded-full">{{ getCategoryName(project.category) }}</span>
                </div>
                <h3 class="text-xl font-semibold mb-2 text-gray-800">{{ project.name }}</h3>
                <p class="text-gray-600 mb-4">{{ project.description }}</p>
                <a
                  :href="project.link"
                  class="text-blue-600 hover:text-blue-800 font-medium flex items-center"
                >
                  查看详情
                  <svg
                    class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>

          <!-- 空状态提示 -->
          <div v-if="!isLoading && filteredProjects.length === 0" class="text-center py-16 text-gray-500">
            暂无该分类下的项目
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 加载状态
const isLoading = ref(false);

// 分类数据
const categories = [
  { id: 'all', name: '全部项目' },
  { id: 'web', name: '网站项目' },
  { id: 'mobile', name: '移动端项目' },
  { id: 'backend', name: '后端项目' },
  { id: 'open-source', name: '开源项目' }
];

// 项目数据
const projects = reactive([
  { id: 1, name: '企业数据分析平台', description: '基于Vue.js和Node.js构建的企业级数据分析平台', image: 'https://picsum.photos/id/0/600/400', category: 'web', link: '/project/web/1' },
  { id: 2, name: '电商管理系统', description: '全栈开发的电商管理系统', image: 'https://picsum.photos/id/180/600/400', category: 'web', link: '/project/web/2' },
  { id: 3, name: '社交网络应用', description: '基于React和Node.js开发的社交网络应用', image: 'https://picsum.photos/id/160/600/400', category: 'mobile', link: '/project/mobile/1' },
  { id: 4, name: 'API服务架构', description: '高性能RESTful API服务架构', image: 'https://picsum.photos/id/119/600/400', category: 'backend', link: '/project/backend/1' },
  { id: 5, name: 'UI组件库', description: '企业级UI组件库', image: 'https://picsum.photos/id/26/600/400', category: 'open-source', link: '/project/open-source/1' },
  { id: 6, name: '移动支付应用', description: '安全可靠的移动支付应用', image: 'https://picsum.photos/id/201/600/400', category: 'mobile', link: '/project/mobile/2' }
]);

// 当前选中分类
const selectedCategory = ref('all');

// 过滤项目列表
const filteredProjects = computed(() => {
  console.log('过滤前项目总数:', projects.length);
  console.log('当前选中分类:', selectedCategory.value);
  
  if (selectedCategory.value === 'all') {
    console.log('显示全部项目:', projects.length);
    return projects;
  }
  
  const filtered = projects.filter(project => project.category === selectedCategory.value);
  console.log('过滤后项目数:', filtered.length);
  return filtered;
});

// 选择分类
const selectCategory = (categoryId) => {
  isLoading.value = true;
  selectedCategory.value = categoryId;
  
  // 短暂延迟模拟加载过程
  setTimeout(() => {
    isLoading.value = false;
  }, 300);
};

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.find(cat => cat.id === categoryId);
  return category ? category.name : '未分类';
};
</script>

<style scoped>
/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 分类按钮样式 */
button {
  transition: all 0.3s ease;
}
</style>